<!--
 * @Description: 
 * @Author: Binggan
 * @Date: 2019-03-19 10:18:55
 * @LastEditors: Binggan
 * @LastEditTime: 2020-03-04 12:31:05
 -->
<template>
  <!-- 登录页 -->
  <div class='login-bg'>
    <h1 class="logo">垃圾分类与回收公益平台</h1>
    <div class='login-regist-box'>
      <h2 class="local-account">账号登录</h2>
      <!-- 登录区-->
      <div class="signin-box" v-show="showLogin">
        <Form ref="formInline" class="login-form" :model="formInline" :rules="ruleInline">
          <FormItem prop="username">
            <Input size="large" type="text" v-model="formInline.username" placeholder="用户名" @on-enter="handleSubmit('formInline')">
            <Icon type="ios-person-outline" slot="prepend" size='20'></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input size="large" type="password" v-model="formInline.password" placeholder="密码" @on-enter="handleSubmit('formInline')">
            <Icon type="ios-lock-outline" slot="prepend" size='20'></Icon>
            </Input>
          </FormItem>
          <FormItem>
            <Button class="type2 f-16" type="primary" :loading="loading.login" @click="handleSubmit('formInline')" long>登录<span v-if='loading.login'>中</span>
            </Button>
          </FormItem>
        </Form>
      </div>

    </div>
  </div>
</template>
<script>
import qs from "qs";
import { mapState, mapMutations } from "vuex";
import bingganUtils from "../assets/js/util";
export default {
  name: "login",
  data() {
    const validateLoginName = (rule, value, callback) => {      
        callback();
      /* let reg = /^\w{1,}$/;
      if (!reg.test(value)) {
        callback(new Error("用户名只能含数字、字母或者下划线"));
      } else {
        callback();
      } */
    };
    const validatePhoneNumber = (rule, value, callback) => {
      let reg = /^(((0\d{2,3}-)?\d{7,8})|(1[3456789]\d{9}))$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确格式的手机号或电话号"));
      } else {
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value !== this.registInfo.password) {
        callback(new Error("两次输入的新密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // loginType: 0,
      showLogin: true,
      formInline: {
        username: "",
        password: ""
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          },
          { validator: validateLoginName, trigger: "blur" }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      loading: { login: false }
    };
  },
  mounted() {
    bingganUtils.getBrowserV();
  },
  methods: {
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          //验证通过
          console.log(this.formInline);
          this.loading.login = true;
          let userInfo = this.formInline;
          let loginUrl = "/user/login";          
          this.$axios.post(loginUrl, qs.stringify(userInfo)).then(res => {
            if (res.errorCode == 0) {
              //登录成功,跳至登录前访问的页面
              console.log(res)
              if(res.data.roleId!==1){
                this.$Message.error("请使用管理员账号登录!");
                return false;
              }
              let user=res.data;
              this.ADD_COUNT(user);
              let redirect = this.$route.query.redirect
                ? this.$route.query.redirect
                : "/";
              this.loading.login = false;
              this.$router.push(redirect);
              
            } else {
              this.$Message.error("登录失败，用户名或密码错误!");
              this.loading.login = false;
            }
          });
        } else {
          this.$Message.error("请补全登录信息!");
        }
      });
    },

    ...mapMutations(["ADD_COUNT"])
  }
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.login-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background: #65b7f1 url("../assets/images/login_bg.png") no-repeat center;
  background-size: cover;
  overflow: hidden;
  .logo {
    position: absolute;
    top: 30px;
    left: 50%;
    color: #fff;
    font-size: 32px;
    text-shadow: 5px 3px 5px #046c80;
    letter-spacing: 2px;
    transform: translateX(-50%);
  }
  .login-regist-box {
    position: absolute;
    width: 400px;
    height: auto;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
    padding: 20px 25px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    h2 {
      text-align: center;
      font-size: 26px;
      margin-bottom: 20px;
      color: #fd982c;
      &.local-account {
        color: #028097;
      }
    }
    .type1 {
      background-color: #fd982c;
      border-color: #fd982c;
    }
    .type2 {
      background-color: #028097;
      border-color: #028097;
    }
    .f-16 {
      font-size: 16px;
    }
    .resTip {
      text-align: center;
      .clickable {
        border: none;
        color: #7b7b7b;
        cursor: pointer;
        transition: 0.3s ease;
        &:hover {
          color: #0454ea;
        }
      }
    }
  }
}
</style>
<style>
.login-regist-box .ivu-input,
.login-regist-box .ivu-form .ivu-form-item-label {
  font-size: 14px !important;
}
</style>


